<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>生成证书</title>
    <link href="../static/css/bootstrap.min.css" rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" href="../static/css/style.css" th:href="@{/css/style.css}">
</head>

<body class="app">
    <div class="mx-auto form">
        <h3 class="mb-5 text-center">生 成 证 书</h3>
        <form class="needs-validation" novalidate action="/">
            <div class="form-wrapper">
                <div class="left">
                    <div class="mb-5 row">
                        <label for="code" class="col-2 col-form-label">
                            <span class="required">*</span>
                            申请码:</label>
                        <div class="col-10">
                            <textarea id="code" class="form-control form-control-sm" rows="8" name="code" placeholder="请输入申请码，输入后自动加载设备序列号、IP列表、Mac列表、主板序列号和cpu序列号" required></textarea>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="expiryTime" class="col-2 col-form-label">
                            <span class="required">*</span>
                            证书有效期:
                        </label>
                        <div class="col-10">
                            <input type="date" id="expiryTime" class="form-control form-control-sm" name="expiryTime" placeholder="请输入有效期截至日" required />
                            <small id="passwordHelpInline" class="text-muted">
                                证书有效期最短为1天后
                            </small>
                        </div>
                        <div class="invalid-feedback">
                            请输入有效期
                        </div>
                    </div>
                    <div class="text-center loading">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                    <div class="detail"></div>
                </div>

                <div class="right">
                    <div class="serial">
                        序列号：<br/><span style="font-size: 9px; color: #00ff73" id="serial"></span>
                    </div>
                    <div class="ip">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" value="" id="ipCheck">
                            <label class="form-check-label" for="ipCheck">
                                IP校验<span style="font-size: 9px; color: #00ff73">(安装服务器需要包含下列其中之一)</span>
                            </label>
                        </div>
                        <div class="iplist">
                        </div>
                    </div>
                    <div class="mac">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" value="" id="macCheck">
                            <label class="form-check-label" for="macCheck">
                              MAC校验<span style="font-size: 9px; color: #00ff73">(安装服务器需要包含下列其中之一)</span>
                            </label>
                        </div>
                        <div class="maclist">
                        </div>
                    </div>
                    <div class="board">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" value="" id="boardCheck">
                            <label class="form-check-label" for="boardCheck">
                              主板校验
                            </label>
                        </div>
                        <div class="board-input">
                            <input id="mainBoardSerial" class="form-control form-control-sm" name="mainBoardSerial" placeholder="输入申请码后自动加载主板序列号" readonly />
                        </div>
                    </div>
                    <div class="cpu">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" value="" id="cpuCheck">
                            <label class="form-check-label" for="cpuCheck">
                              CPU校验
                            </label>
                        </div>
                        <div class="cpu-input">
                            <input id="cpuSerial" class="form-control form-control-sm" name="cpuSerial" placeholder="输入申请码后自动加载cpu序列号" readonly />
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-3 text-center mt-5">
                <button class="btn btn-primary mx-4 submit-btn" type="submit" value="注册" name="submit">注册</button>
                <button class="btn btn-secondary" type="reset" value="重置" name="reset">重置</button>
            </div>
        </form>
    </div>
    <script src="../static/js/jquery-3.6.0.min.js" th:src="@{/js/jquery-3.6.0.min.js}"></script>
    <script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
    <script src="../static/js/util.js" th:src="@{/js/util.js}"></script>
    <script src="../static/js/index.js" th:src="@{/js/index.js}"></script>
</body>

</html>
